import UserTask from "./task-components/UserTask";
// import ScriptTask from "./task-components/ScriptTask.vue";
// import ReceiveTask from "./task-components/ReceiveTask.vue";
import { Form, Checkbox } from "antd";
import { useEffect, useMemo, useState } from "react";

let bpmnElement: any = null;
export default function ElementTask(props: any) {
	const [taskConfigForm, setTaskConfigForm] = useState({
		asyncAfter: false,
		asyncBefore: false,
		exclusive: false
	});
	// const [witchTaskComponent, setWitchTaskComponent] = useState();
	// const installedComponent = {
	// 	// 手工任务与普通任务一致，不需要其他配置
	// 	// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
	// 	// 发送任务、服务任务、业务规则任务共用一个相同配置
	// 	UserTask: "UserTask", // 用户任务配置
	// 	ScriptTask: "ScriptTask", // 脚本任务配置
	// 	ReceiveTask: "ReceiveTask" // 消息接收任务
	// };
	const installedComponent: Recordable<React.FC> = {
		// 手工任务与普通任务一致，不需要其他配置
		// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
		// 发送任务、服务任务、业务规则任务共用一个相同配置
		UserTask: UserTask // 用户任务配置
		// ScriptTask: "ScriptTask", // 脚本任务配置
		// ReceiveTask: "ReceiveTask" // 消息接收任务
	};
	// const bpmnElement = ref();

	const bpmnInstances = () => (window as any).bpmnInstances;
	const changeTaskAsync = () => {
		let configForm = taskConfigForm;
		if (!taskConfigForm.asyncBefore && !taskConfigForm.asyncAfter) {
			// taskConfigForm.value.exclusive = false;
			configForm.exclusive = false;
			setTaskConfigForm({
				...taskConfigForm,
				exclusive: false
			});
		}
		bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
			// ...taskConfigForm
			...configForm
		});
	};

	const renderComponent = useMemo(() => {
		console.log("props.type修改", props);
		const Component = installedComponent[props.type];
		return <Component {...props} />;
	}, [props.type, props.id]);

	/** Effect */

	useEffect(() => {
		bpmnElement = bpmnInstances().bpmnElement;
		// taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore;
		// taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter;
		// taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive;
		setTaskConfigForm({
			...taskConfigForm,
			asyncBefore: bpmnElement?.businessObject?.asyncBefore,
			asyncAfter: bpmnElement?.businessObject?.asyncAfter,
			exclusive: bpmnElement?.businessObject?.exclusive
		});
	}, [props.id]);

	useEffect(() => {
		// witchTaskComponent = installedComponent[props.type]
		// if (props.type == installedComponent.UserTask) {
		// 	// witchTaskComponent.value = UserTask;
		// 	// setWitchTaskComponent(UserTask);
		// }
		// if (props.type == installedComponent.ScriptTask) {
		// 	// witchTaskComponent.value = ScriptTask;
		// 	setWitchTaskComponent(ScriptTask);
		// }
		// if (props.type == installedComponent.ReceiveTask) {
		// 	// witchTaskComponent.value = ReceiveTask;
		// 	setWitchTaskComponent(ReceiveTask);
		// }
	}, [props.type]);

	return (
		<div className="panel-tab__content">
			<Form size="small" label-width="90px" style={{ display: "none" }}>
				{/* <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none --> */}
				<Form.Item label="异步延续" style={{ display: "none" }}>
					<Checkbox checked={taskConfigForm.asyncBefore} label="异步前" value="异步前" onChange={changeTaskAsync} />
					<Checkbox checked={taskConfigForm.asyncAfter} label="异步后" value="异步后" onChange={changeTaskAsync} />
					{taskConfigForm.asyncAfter ||
						(taskConfigForm.asyncBefore && (
							<Checkbox checked={taskConfigForm.exclusive} label="排除" value="排除" onChange={changeTaskAsync} />
						))}
				</Form.Item>
				{/* <component is={witchTaskComponent} v-bind="$props" /> */}
				{/* <witchTaskComponent {...props} /> */}
			</Form>
			{renderComponent}
		</div>
	);
}
